<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <a-form-item label="流程编码">
              <a-input v-model="queryParam.processDefinitionId" placeholder="请输入流程编码"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24" >
            <a-form-item label="流程名称">
              <a-input v-model="queryParam.processDefinitionName" placeholder="请输入流程名称"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-item label="任务发起人">
              <j-select-user-by-dep v-model="queryParam.processApplyUserName"></j-select-user-by-dep>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="4" :md="4" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button  type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        size="middle"
        bordered
        row-key="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="handleClick(record)">办理</a>
          <a-divider type="vertical" />
          <a @click="handleBackClick(record)">退回</a>
          <a-divider type="vertical" />
          <a @click="handleEntrustClick(record)">委托</a>
        </template>
      </a-table>
      <!-- <s-table
        size="middle"
        bordered
        row-key="id"
        :columns="columns"
        :data="loadData_"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="handleClick(record)">办理</a>
          <a-divider type="vertical" />
          <a @click="handleBackClick(record)">退回</a>
          <a-divider type="vertical" />
          <a @click="handleEntrustClick(record)">委托</a>
        </template>
      </s-table> -->
    </div>
    <!-- 任务办理弹窗 -->
    <task-model ref="taskModel" :taskData="taskData" :title="taskTitle" @submit="completeTaskSubmit"></task-model>
    <!-- 任务退回弹窗 -->
    <task-entrust-model ref="taskEntrustModel" @ok="taskEntrust"></task-entrust-model>
    <a-modal
      title="退回意见"
      :visible="backVisible"
      @ok="handleBackOk"
      @cancel="handleBackCancel"
    >
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
      <a-form-item label="退回意见">
        <a-textarea
          v-decorator="['backComment', { rules: [{ required: true, message: '请填写退回意见' }] }]"
          placeholder="请填写退回意见"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
    </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import taskModel from '../model/TaskModel'
import { backTask, completeTask, entrustTask } from '@/api/task'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import taskEntrustModel from '../model/taskEntrustModel'
import STable from '@/components/table'
export default {
  name: 'myTask',
  components: {
    JSelectUserByDep,
    taskModel,
    JSelectMultiUser,
    taskEntrustModel,
    STable
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '流程名称',
          align: 'center',
          dataIndex: 'modelName'
        },
        {
          title: '流程编码',
          align: 'center',
          dataIndex: 'modelKey'
        },
        {
          title: '业务标题',
          align: 'center',
          dataIndex: 'taskName'
        },
        {
          title: '发起人',
          align: 'center',
          dataIndex: 'creator'
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '当前环节',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/activiti/task/getMyTaskList'
      },
      backVisible: false,
      taskData: {},
      // loadData_: parameter => {
      //   return getAction(this.url.list).then(res => {
      //     console.log(res)
      //     return res.result
      //   })
      // },
      form: this.$form.createForm(this),
      taskTitle: ''
    }
  },
  methods: {
    handleClick(data) {
      this.taskData = data
      this.taskTitle = '【' + data.modelName + '】流程办理'
      this.$refs.taskModel.editModalVisible = true
    },
    handleBackClick(data) {
      this.backVisible = true
      this.taskData = data
    },
    handleBackCancel() {
      this.backVisible = false
      this.form.setFieldsValue({
        backComment: ''
      })
    },
    handleBackOk() { // 流程退回
      this.form.validateFields((err, values) => {
        if (!err) {
          backTask({
            comment: this.form.getFieldValue('backComment'),
            id: this.taskData.id,
            procInstId: this.taskData.processInstanceId,
            formDataId: this.taskData.formDataId
          }).then(res => {
            if (res.success) {
              this.$message.success('退回成功')
              this.loadData()
              this.backVisible = false
              this.form.setFieldsValue({
                backComment: ''
              })
            } else {
              this.$message.error(res.message)
            }
          }).catch((error) => {
            console.log(error)
          })
        }
      })
    },
    completeTaskSubmit(data, appendFormData) { // 流程审批
      completeTask({
        comment: data.reason,
        taskId: this.taskData.id,
        procInstId: this.taskData.processInstanceId,
        formDataId: this.taskData.formDataId,
        usernames: '',
        flag: data.flag,
        appendFormId: this.taskData.appendForm && this.taskData.appendForm.id,
        formData: this.taskData.appendForm && JSON.stringify(appendFormData)
      }).then(res => {
        if (res.success) {
          this.$message.success('流程办理成功')
          this.loadData()
          this.$refs.taskModel.editModalVisible = false
        } else {
          this.$message.error(res.message)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    handleEntrustClick(data) { // 点击委托
      this.taskData = data
      this.$refs.taskEntrustModel.modalVisible = true
    },
    taskEntrust(data) {
      const that = this
      if (!data) {
        this.$message.error('请先选择委托人')
        return false
      }
      entrustTask({ taskId: this.taskData.id, userId: data }).then(function(res) {
        if (res.success) {
          that.$message.success('流程委托成功')
          that.loadData()
          that.$refs.taskEntrustModel.modalVisible = false
        } else {
          that.$message.error(res.message)
        }
      })
    }
  }
}
</script>
